<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="swiper-bundle.min.css" />
		<script src="jquery-3.7.1.min.js"></script>
		<script src="swiper-bundle.min.js"></script>
	</head>
	<body>

		<!-- 轮播图部分 -->
		<div class="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="./img/1.png" alt="" /></div>
				<div class="swiper-slide"><img src="./img/1.png" alt="" /></div>
				<div class="swiper-slide"><img src="./img/1.png" alt="" /></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!-- 顶部导航 -->
		<div class="marx-nav">
			<img src="./img/2.png" alt="" class="marx-nav-img1" />
			<ul>
				<li>首页</li>
				<li><a href="department.html" class="a">部门概括</a></li>
				<li>师资队伍</li>
				<li>思想建设</li>
				<li>红馆</li>
				<li>心理健康教育中心</li>
				<li>教学科研</li>
				<li>学生社团</li>
			</ul>
			<div class="input">
				<img src="./img/14.png" alt="" />
				<input type="text" placeholder="请输入关键词搜索" />
			</div>
		</div>
		<!-- 新闻公告 -->
		<div class="news">
			<div class="news_top">
				<p>XIN WEN GONG GAO</p>
				<p>新闻公告</p>
			</div>
			<!-- 中间 -->
			<div class="news_content1">
				<div class="new-con">
					<div class="new-con-left">
						<img src="./img/6.png" alt="" class="news_content1_img" />
						<p></p>
					</div>
					<div class="new-con-right">
						<div class="new-title">
							<p>1“为党育人 为国育才”——9位大教师亲情讲述育人故事</p>
						</div>
						<div class="new-center">
							<div class="line"></div>
							<div class="time">2022-11-02</div>
						</div>
						<div class="new-text">
							<p>1三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契….</p>
						</div>
						<div class="new-bottom">
							<img src="img/36.png" alt="" class="new-img-left">
							<img src="img/25.png" alt="" class="new-img-right">
							<div class="pages">
								<span class="page">1</span>/3
							</div>
						</div>
					</div>
				</div>
				<div class="new-con">
					<div class="new-con-left">
						<img src="./img/5.png" alt="" class="news_content1_img" />
					</div>
					<div class="new-con-right">
						<div class="new-title">
							<p>2“为党育人 为国育才”——9位大教师亲情讲述育人故事</p>
						</div>
						<div class="new-center">
							<div class="line"></div>
							<div class="time">2022-11-02</div>
						</div>
						<div class="new-text">
							<p>2三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契….</p>
						</div>
						<div class="new-bottom">
							<img src="./img/36.png" alt="" class="new-img-left">
							<img src="./img/25.png" alt="" class="new-img-right">
							<div class="pages">
								<span class="page">2</span>/3
							</div>
						</div>
					</div>
				</div>
				<div class="new-con">
					<div class="new-con-left">
						<img src="./img/3.png" alt="" class="news_content1_img" />
					</div>
					<div class="new-con-right">
						<div class="new-title">
							<p>3“为党育人 为国育才”——9位大教师亲情讲述育人故事</p>
						</div>
						<div class="new-center">
							<div class="line"></div>
							<div class="time">2022-11-02</div>
						</div>
						<div class="new-text">
							<p>3三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契….</p>
						</div>
						<div class="new-bottom">
							<img src="img/36.png" alt="" class="new-img-left">
							<img src="img/25.png" alt="" class="new-img-right">
							<div class="pages">
								<span class="page">3</span>/3
							</div>
						</div>
					</div>
				</div>
				<script>
					$('.new-con:first').show().siblings('.new-con').hide()
					var index = 0
					$('.new-img-right').click(() => {
						index++;
						if (index < 3) {
							$('.new-con').eq(index).show().siblings('.new-con').hide()
						} else {
							index = -1;
						}
					})
					$('.new-img-left').click(() => {
						index--;
						if (index >= 0) {
							$('.new-con').eq(index).show().siblings('.new-con').hide()
						} else {
							index = 3;
						}
					})
				</script>
			</div>


		</div>
		<!-- 下面 -->
		<div class="news_content2">
			<p class="news_content2_p"></p>
			<div class="news_content2_div">
				<div>
					<p>“为党育人为国育才”一9位法大教师倾情讲述育</p>
					<p>三尺讲台育英才，一方舞台展风采。“"课比天大，是一幅字、
						一块匾，是心照不宣的默契三尺讲台育英才</p>
					<p>2022-11-02</p>
				</div>
				<!-- 2 -->
				<div>
					<p>“为党育人为国育才”一9位法大教师倾情讲述育</p>
					<p>三尺讲台育英才，一方舞台展风采。“"课比天大，是一幅字、
						一块匾，是心照不宣的默契三尺讲台育英才</p>
					<p>2022-11-02</p>
				</div>
				<!-- 3 -->
				<div>
					<p>“为党育人为国育才”一9位法大教师倾情讲述育</p>
					<p>三尺讲台育英才，一方舞台展风采。“"课比天大，是一幅字、
						一块匾，是心照不宣的默契三尺讲台育英才</p>
					<p>2022-11-02</p>
				</div>
			</div>
		</div>
		<!-- 查看更多 -->
		<div class="news_content2_ck">
			<span><a href="" class="aa">查看更多</a></span>
			<img src="./img/25.png" alt="" />
		</div>

		</div>
		<!-- 党建引领 -->
		<div class="leading">
			<div class="news_top">
				<p>DANG JIAN YIN LING</p>
				<p>党建引领</p>
			</div>
			<!-- 内容 -->
			<div class="leading_content">
				<div class="leading_content1">
					<img src="./img/5.png" alt="" />
					<div class="leading_content1_div">
						<div>
							<p>02</p>
							<p>2022-11</p>
						</div>
						<div>
							关于举办第二届(2022年)烟台市乡村
							面艺关于举办第二届(2022年)烟台市
							乡村面艺
						</div>
					</div>
					<div class="show">

					</div>
					<div class="hidden">

					</div>
				</div>
				<!-- 2 -->
				<div class="leading_content1">
					<img src="./img/5.png" alt="" />
					<div class="leading_content1_div">
						<div>
							<p>02</p>
							<p>2022-11</p>
						</div>
						<div>
							关于举办第二届(2022年)烟台市乡村
							面艺关于举办第二届(2022年)烟台市
							乡村面艺
						</div>
					</div>
					<div class="show">

					</div>
					<div class="hidden">

					</div>
				</div>
				<!-- 3 -->
				<div class="leading_content1">
					<img src="./img/5.png" alt="" />
					<div class="leading_content1_div">
						<div>
							<p>02</p>
							<p>2022-11</p>
						</div>
						<div>
							关于举办第二届(2022年)烟台市乡村
							面艺关于举办第二届(2022年)烟台市
							乡村面艺
						</div>
					</div>
					<div class="show">

					</div>
					<div class="hidden">

					</div>
				</div>
			</div>
			<!-- 查看更多 -->
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="./img/25.png" alt="" />
			</div>
		</div>
		<!-- 教研动态 -->
		<div class="teaching">
			<div class="news_top">
				<p>JIAO YAN DONG TAI</p>
				<p>新闻公告</p>
			</div>
			<!-- 内容 -->、
			<div class="teaching_content">
				<div class="teaching_content1">
					<img src="./img/6 (2).png" alt="" />
					<div>
						"为党育人 为国育才"
					</div>
				</div>
				<div class="teaching_content2">
					<ul>
						<li>"为党育人 为国育才" <span>2022-11-2</span></li>
						<li>"为党育人 为国育才" <span>2022-11-2</span></li>
						<li>"为党育人 为国育才" <span>2022-11-2</span></li>
						<li>"为党育人 为国育才" <span>2022-11-2</span></li>
						<li>"为党育人 为国育才" <span>2022-11-2</span></li>
					</ul>
				</div>
			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="./img/25.png" alt="" />
			</div>
		</div>
		<!-- 社会服务 -->
		<div class="society">
			<div class="news_top">
				<p>SHE HUI FU WU</p>
				<p>社会服务</p>
			</div>
			<div class="society_content">
				<div class="society_content1">
					<img src="./img/10.png" alt="" />
					<div>
						<p>形势与政策报告会之“新东欧地缘政治冲突及……</p>
						<p>
							形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘政治冲突及……
						</p>
						<p>
							<img src="./img/11.png" alt="" />
							<span>2022-09-29</span>
						</p>
					</div>
				</div>
				<div class="society_content2">
					<div>
						<img src="./img/8.png" alt="" />
						红馆
					</div>
					<div>
						<img src="./img/9.png" alt="" />
						心理健康中心
					</div>
				</div>
			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="./img/25.png" alt="" />
			</div>
		</div>
		<!-- 主题活动 -->
		<div class="theme">
			<div class="news_top">
				<p>ZHU TI HUO DONG</p>
				<p>主题活动</p>
			</div>
			<div class="theme_content">
				<div class="theme-card1">
					<div class="theme-top">
						<p class="theme-title1">划重点!一图读懂山东<br />城院“十四五”发<br />展规划</p>
						<p class="theme-title2">山东城院“五心工程”温暖校园</p>
					</div>
					<div class="theme-bottom">
						<p class="theme-text1">3月20日下午，烟台市高新区<br />管委副主任李如鹏、市教育局<br />高新区分局...</p>
						<p class="theme-text2">3月24日，一场别开生面的“<br />平台通过网络直播的形式拉<br />开帷幕..</p>
					</div>
				</div>
				<div class="theme-card1">
					<div class="theme-top">
						<p class="theme-title1">划重点!一图读懂山东<br />城院“十四五”发<br />展规划</p>
						<p class="theme-title2">山东城院“五心工程”温暖校园</p>
					</div>
					<div class="theme-bottom">
						<p class="theme-text1">3月20日下午，烟台市高新区<br />管委副主任李如鹏、市教育局<br />高新区分局...</p>
						<p class="theme-text2">3月24日，一场别开生面的“<br />平台通过网络直播的形式拉<br />开帷幕..</p>
					</div>
				</div>
				<div class="theme-card1">
					<div class="theme-top">
						<p class="theme-title1">划重点!一图读懂山东<br />城院“十四五”发<br />展规划</p>
						<p class="theme-title2">山东城院“五心工程”温暖校园</p>
					</div>
					<div class="theme-bottom">
						<p class="theme-text1">3月20日下午，烟台市高新区<br />管委副主任李如鹏、市教育局<br />高新区分局...</p>
						<p class="theme-text2">3月24日，一场别开生面的“<br />平台通过网络直播的形式拉<br />开帷幕..</p>
					</div>
				</div>
				<div class="theme-card1">
					<div class="theme-top">
						<p class="theme-title1">划重点!一图读懂山东<br />城院“十四五”发<br />展规划</p>
						<p class="theme-title2">山东城院“五心工程”温暖校园</p>
					</div>
					<div class="theme-bottom">
						<p class="theme-text1">3月20日下午，烟台市高新区<br />管委副主任李如鹏、市教育局<br />高新区分局...</p>
						<p class="theme-text2">3月24日，一场别开生面的“<br />平台通过网络直播的形式拉<br />开帷幕..</p>
					</div>
				</div>



			</div>
			<div class="news_content2_ck">
				<span><a href="" class="aa">查看更多</a></span>
				<img src="./img/25.png" alt="" />
			</div>
		</div>
		<!-- 马院风采 -->
		<div class="mapin">
			<div class="news_top">
				<p>MA YUAN FENG CAI</p>
				<p>马院风采</p>
			</div>
			<div class="mapin_content">
				<div class="scroll-container">
					<div class="scroll-content">
						<img src="img/15.jpg" />
					</div>
					<div class="scroll-content">
						<img src="img/16.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/17.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/18.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/19.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/20.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/21.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/22.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/23.jpg" alt="" />
					</div>
					<div class="scroll-content">
						<img src="img/24.jpg" alt="" />
					</div>
				</div>
			</div>
		</div>
		<!-- 友情链接 -->
		<div class="frendly">
			<ul>
				<li>友情链接：</li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>
				<li><a href="" class="frendly_a">山东教育局</a></li>

			</ul>
		</div>
		<!-- 最后 -->
		<div class="index_bottom">
			<div class="index_bottom_content">
				<img src="./img/2.png" alt="" />
				<!-- <div></div> -->
				<p class="index_bottom_content_p1">地址：山东烟台市高新区海天路1001号</p>
				<p class="index_bottom_content_p2">办公室电话：0535-293876</p>
				<img src="./img/26.png" alt="" class="index_bottom_content_img2" />
			</div>
			<div class="index_bottom_abs">
				Copyright O山东省城市服务技师学院版权所有
			</div>



		</div>







		<!-- 逻辑部分 -->
		<script>
			var mySwiper = new Swiper('.swiper', {
				autoplay: {
					delay: 3000, //1秒切换一次
				},
				loop: true, // 循环模式选项

				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				// navigation: {
				//   nextEl: '.swiper-button-next',
				//   prevEl: '.swiper-button-prev',
				// },

			})
		</script>

	</body>
</html>